<template>
	<div class="question-main">
		<div class="question-title">
			{{qIndex+1}}.
			<span v-html="question.questionTitle"></span>
		</div>
		<div class="question-info">
			<div class="question-info-title">正确答案:</div>
			<div class="question-info-main" v-html="question.answer">
				
			</div>
		</div>
		<div class="question-info">
			<div class="question-info-title">难易程度:</div>
			<div class="question-info-main" >
				{{complexList[question.complex - 1]}}
			</div>
		</div>
		<div class="question-info">
			<div class="question-info-title">答案解析:</div>
			<div class="question-info-main" v-html="question.analysis">
				
			</div>
		</div>
		<template v-if="showUserAnswer">
			<div class="question-info">
				<div class="question-info-title">学生答案:</div>
				<div class="question-info-main" v-html="question.userAnswer" v-if="question.isDone">
					
				</div>
				<div class="no-answer" v-else ><i class="el-icon-warning"></i>未答</div>
			</div>
			<div class="question-info" v-if="trailVideoUrl">
				<div class="question-info-title">试讲视频:</div>
				<div class="question-info-main">
					<video :src="trailVideoUrl" style="width: 400px;height: 300px;" controls="controls"></video>
				</div>
			</div>
			<div class="question-info" v-if="attachs.length > 0">
				<div class="question-info-title">附件:</div>
				<div class="question-info-main">
					<div class="file-item" v-for="(attach,index) in attachs" :key="index" @click="downLoadAttach(attach)">
						{{attach.attName}}
					</div>
				</div>
			</div>
			<div class="question-info" v-if="question.scoreKeys">
				<div class="question-info-title">系统判分:</div>
				<div class="question-info-main">
					<lx-table :isBatchDel="false" :isPagination="false" :tableData="question.scoreKeys" :tableCols="tableCols" :showSummary="true"></lx-table>
				</div>
			</div>
			<div class="question-info">
				<div class="question-info-title">得分:</div>
				<div class="question-info-main">
					<el-input :value="question.userScore" @input="userScoreInput" style="width: 120px;" :disabled="!question.isDone" ></el-input>
				</div>
			</div>
			
			<div class="question-info">
				<div class="question-info-title">本题评价:</div>
				<div class="question-info-main" >
					<el-input type="textarea" v-model="question.comment"  @input="commentInput"></el-input>
				</div>
			</div>
		</template>
		
	</div>
</template>

<script>
	import {complexList} from "@/common/question.js";
	import {downloadFileByUrl} from "@/common/common.js";
	import LxTable from "@/components/LxTable.vue";
	export default{
		name:"AwardWinningQuestion",
		components:{
			"lx-table":LxTable
		},
		props:{
			question:{
				type:Object,
				require:true
			},
			qIndex:{
				type:Number
			},
			showUserAnswer:{
				type:Boolean,
				default:false
			},
			
		},
		mounted() {
			this.getAttachs();
		},
		data(){
			return{
				complexList:complexList,
				tableCols: [{
						label: '得分点',
						prop: 'key',
						align:'center'
					},
					{
						label: '分数',
						prop: 'val',
						align:'center'
					},
					{
						label: '得分',
						prop: 'autoScore',
						align:'center'
					},
				],
				trailVideoUrl:"",
				attachs:[]
			}
		},
		methods:{
			userScoreInput(val){
				val =  Number(String(val).replace(/\D/g, ''));
				console.log(this.question)
				let score = Number(this.question.score);
				if(val > score){
					val = score;
					this.$message.warning("得分必能高于题目总分");
				}
				this.question.userScore = val;
				this.$emit("userScoreInput",this.question);
				
			},
			commentInput(){
				this.$emit("commentInput",this.question);
			},
			getAttachs(){
				let userAnswerAttachs = this.question.userAnswerAttachs;
				if(userAnswerAttachs){
					for(let i = 0 ; i < userAnswerAttachs.length ; i++){
						if(userAnswerAttachs[i].attType == "video"){
							this.trailVideoUrl = userAnswerAttachs[i].attUrl;
							userAnswerAttachs.splice(i,1);
							this.attachs = userAnswerAttachs;
							return;
						}
					}
				}
			},
			downLoadAttach(attach){
				downloadFileByUrl(attach.attUrl,attach.attName);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.question-main{
		width: 100%;
		box-sizing: border-box;
		@include flex-column(flex-start, flex-start);
		min-height: 100px;
		.question-title{
			color: #666666;
		}
		.options-list{
			@include flex-column(flex-start, flex-start);
			.options-item{
				@include flex-row(flex-start, flex-start);
				.options-item-title{
					color: #666666;
				}
				.options-item-main{
					line-height: 20px;
					color: #666666;
					margin: 0 8px;
				}
				margin-top: 16px;
			}
		}
		.question-info-title{
			width: 80px;
			color: #666666;
		}
		.question-info-main{
			
			flex: 1;
			line-height: 20px;
			color: #666666;
			@include flex-column(flex-start, flex-start);
			.question-info-main-row{
				width: 100%;
				height: 20px;
				@include flex-row(flex-start, center);
			}
			::v-deep img{
				max-width: 96% !important;
			}
			
			.file-item{
				padding-left: 16px;
				cursor: pointer;
				color: #409EFF;
			}
			.file-item:hover{
				background-color: #F5F7FA;
			}
		}
		.question-info{
			width: 100%;
			border-top: 1px solid #EBEEF6;
			padding-top: 16px;
			margin-top: 16px;
			min-height: 40px;
			@include flex-row(flex-start, center);
			
			.no-answer{
				font-weight: bold;
				color: #FF3333;
				height: 40px;
				line-height: 40px;
				margin-top: 8px;
				font-size: 18px;
				.el-icon-warning{
					font-size: 18px;
				}
			}
		}
		
	}
	
	::v-deep .el-table {
		th,tr,td{
			height: 40px;
			line-height: 40px;
		}
	}
</style>
